<template>
    <div class="addcontent">
        <!-- <el-form ref="form" :model="form" label-width="80px">
                        <el-row class="addImages">
                        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                        </el-row>
                        <el-form-item>
                        <editor></editor>
                        </el-form-item>
                        </el-form>-->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="封面" prop="img">
                 <el-button type="text" @click="dialogTableVisible = true">上传图片</el-button>
                 <div class="imgdialog" v-show="imgdialog">
                     <i class="el-icon-delete" @click="del"></i>
                     <img :src="ruleForm.img" alt="" width="120" height="120">
                </div>
            </el-form-item>
            <el-form-item label="标题" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="des">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="ruleForm.des">
                </el-input>
            </el-form-item>
            <el-form-item label="主料" prop="cailiao">
                <el-input v-model="ruleForm.cailiao"></el-input>
            </el-form-item>
            <el-form-item label="辅料" prop="fzcailiao">
                <el-input v-model="ruleForm.fzcailiao"></el-input>
            </el-form-item>
             <el-form-item>
              <script id="editor" type="text/plain"></script>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>

            <el-dialog title="上传图片" :visible.sync="dialogTableVisible">
               <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
                    <el-tab-pane label="本地上传" name="first">
                        <el-upload 
                            :class="{disabled:uploadDisabled}"
                            action="/menus/uploadImg" 
                            list-type="picture-card"
                            :file-list="uploadImgList" 
                            :on-preview="handlePictureCardPreview" 
                            :on-remove="handleRemove" 
                            :on-success="uploadSucceess">
                                <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="网络图片" name="second">
                        <el-input v-model="inputUrl" class="webkit_input"></el-input>
                        <el-button type="primary" @click="addImgUrl">添加</el-button>
                         <div class="WebkitImg">
                            <img :src="imgUrl" alt="" width="160" height="160">
                        </div>   
                    </el-tab-pane>
                    <el-row>
                         <el-button type="danger" plain @click="sure">确认</el-button>
                         <el-button @click="cancel">取消</el-button>
                    </el-row>
                </el-tabs>
            </el-dialog>
        </el-form>
    </div>
</template>
<script>
// import editor from "./editor";
import axios from "axios";
// import UE from "../views/ue.vue";

export default {
  data() {
    return {
      imgdialog: false, //图片dialog显示隐藏
      editor: null,
      localUrl: "",
      activeName2: "first",
      defaultMsg: "",
      dialogTableVisible: false,
      imgUrl: "",
      uploadDisabled: false,
      uploadImgList: [],
      dialogVisible: false,
      dialogVisible2: false,
      inputUrl: "",
      ruleForm: {
        title: "",
        des: "",
        cailiao: "",
        fzcailiao: "",
        img: "",
        content: ""
      },
      rules: {
        title: [
          {
            required: true,
            message: "标题不能为空",
            trigger: "blur"
          },
          {
            min: 3,
            message: "最小請輸入3個字符",
            trigger: "blur"
          },
          {
            max: 10,
            message: "最長只輸入10 个字符",
            trigger: "blur"
          }
        ],
        des: [
          {
            required: true,
            message: "描述不能为空",
            trigger: "blur"
          },
          {
            min: 3,
            message: "最小請輸入3個字符",
            trigger: "blur"
          }
        ],
        cailiao: [
          {
            required: true,
            message: "主料不能为空",
            trigger: "blur"
          },
          {
            min: 3,
            message: "最小請輸入3個字符",
            trigger: "blur"
          },
          {
            max: 10,
            message: "最長只輸入10 个字符",
            trigger: "blur"
          }
        ],
        fzcailiao: [
          {
            required: true,
            message: "辅料不能为空",
            trigger: "blur"
          },
          {
            min: 3,
            message: "最小請輸入3個字符",
            trigger: "blur"
          }
        ],
        img: [
          {
            min: 3,
            message: "最小請輸入3個字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  //   computed: {
  //     uploadDisabled: function() {
  //          return this.uploadImgList.length > 0;
  //       console.log(111111);
  //     }
  //   },
  created() {},

  methods: {
    del() {
      console.log("删除图片", this.ruleForm.img);
      this.imgdialog = false;
    },
    //添加网路图片
    addImgUrl() {
      if (this.inputUrl === "") {
        this.$notify.error({
          title: "错误",
          message: "网络图片不能为空"
        });
      } else {
        this.imgUrl = this.inputUrl;
      }
      console.log("inputUrl", this.inputUrl);
      //   this.dialogVisible2 = true;
    },
    //   上传图片弹窗确认
    sure() {
      //   if (this.ruleForm.img !== "") {
      //     alert("本地图片");
      //   } else {
      //     alert("请输入本地图片");
      //   }
      console.log("本地图片", this.localUrl);
      if (this.localUrl === "") {
        console.log("本地图片不能为空");
        this.$notify.error({
          title: "致命错误",
          message: "本地图片不能为空"
        });
      } else {
        // this.ruleForm.img = response.data.info;
        this.ruleForm.img = this.localUrl;
        console.log("本地图片", this.localUrl);
        this.dialogTableVisible = false; //关闭弹窗
        // this.localUrl = ""; //  初始化
        this.imgdialog = true; //打开图片显示边框
      }
      //   if (this.inputUrl === "") {
      //     console.log("网络图片不能为空");
      //     this.$notify.error({
      //       title: "致命错误",
      //       message: "网络图片不能为空"
      //     });
      //   } else {
      //     console.log("网络图片", this.inputUrl);
      //     this.ruleForm.img = this.inputUrl;
      //     this.dialogTableVisible = false; //关闭弹窗
      //     this.inputUrl = ""; //  初始化
      //     this.imgUrl = "";
      //     this.imgdialog = true; //打开图片显示边框
      //   }
    },
    //   上传图片弹窗取消
    cancel() {
      this.dialogTableVisible = false;
    },
    //   点击上传图片tab切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
    uploadSucceess(response) {
      //   if (response.code === 200) {
      this.localUrl = response.data.info;
      console.log("localUrl", this.localUrl);
      //     if (this.uploadImgList.length === 0) {
      //       this.uploadDisabled = true;
      //     }
      //   }
    },
    // 提交
    submitForm() {
      console.log("ruleForm", this.ruleForm);
      let content = this.editor.getContent();
      this.ruleForm.content = content;
      var id = this.$route.params.id;
      let method = id != null ? "put" : "post";
      let url = id != null ? `/menus/${id}` : "/menus";
      axios({
        method: method,
        url: url,
        data: {
          title: this.ruleForm.title,
          des: this.ruleForm.des,
          cailiao: this.ruleForm.cailiao,
          img: this.ruleForm.img,
          fzcailiao: this.ruleForm.fzcailiao,
          content: this.ruleForm.content
        }
      })
        .then(res => {
          this.$message({
            type: "success",
            message: "添加成功!"
          });
          this.ruleForm = {
            title: "",
            des: "",
            cailiao: "",
            fzcailiao: "",
            img: "",
            content: ""
          };
          // location.href = "/list";
          this.$router.push("/list");
        })
        .catch(error => {
          console.log(error);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.uploadDisabled = false;
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
    }
  },
  mounted() {
    // const _this = this;
    this.editor = UE.getEditor("editor", this.config); // 初始化UE
    // this.editor.addListener("ready", function() {
    //   _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
    // });
    var id = this.$route.params.id;
    // 初始化判断有无id，有id的是编辑页面，无id的是添加页面
    if (!id) {
      // 无id的是添加页面
      console.log("我是添加");
      this.ruleForm = {
        title: "",
        des: "",
        cailiao: "",
        fzcailiao: "",
        content: ""
      };
      // 有id的是编辑页面
      // axios({
      //         method: 'get',
      //         url: '/menus'
      //     })
      //     .then(res => {
      //         console.log(res.data);
      //     })
    } else {
      console.log("我是编辑");
      if (this.uploadImgList.length === 0) {
        this.uploadDisabled = true;
      }
      axios({
        method: "get",
        url: "/menus/" + id
      }).then(res => {
        let result = res.data;
        this.ruleForm = result.data[0];
        this.editor.setContent(result.data[0].content);
        this.imgdialog = true;
        this.uploadImgList.unshift({ name: "", url: result.data[0].img });
        console.log("ruleForm", this.ruleForm);
        this.inputUrl = result.data[0].img;
        this.imgUrl = result.data[0].img;
      });
    }
  },
  destroyed() {
    this.editor.destroy();
  },
  components: {
    // editor
    // UE
  }
};
</script>
<style scoped>
.el-icon-delete {
  z-index: 12;
  cursor: pointer;
  line-height: 120px;
  color: #fff;
  left: 48%;
  display: none;
  position: absolute;
}
.imgdialog {
  border: 1px solid red;
  height: 120px;
  position: relative;
  width: 120px;
}
.imgdialog:hover {
  background: rgba(0, 0, 0, 0.8);
  z-index: 11;
}
.imgdialog:hover .el-icon-delete {
  display: block;
}
.WebkitImg {
  margin: 20px 0;
}

.webkit_input {
  width: 80%;
}
.addcontent {
  padding: 30px 34px;
  position: relative;
  margin: 20px;
  width: 80%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px 0 rgba(7, 17, 27, 0.06);
}
.addImages {
  padding-bottom: 30px;
}
.el-input .el-input__inner {
  height: 33px !important;
}
.info {
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
}
</style>

<style>
.el-dialog__body {
  padding: 10px 20px;
}
.disabled .el-upload--picture-card {
  display: none;
}
.edui-combox-body,
.edui-button-body,
.edui-box {
  height: 20px !important;
}
.edui-default {
}
</style>